<template>
  <div class="writing-text">
    <commonBanner
      bgUrl="https://oss-imag.aiseoword.com/aiseo-image/img-tab02-bannerIMG.webp"
      :listArr="['100+营销专家团队', 'AI工具技术', '综合性文字服务']"
      chatInfo="您好, 我想了解更多关于文字撰写的内容"
      buttonText="撰写咨询"
    >
      <img
        class="banner-title-image"
        src="@/assets/image/mobile/write-text-simple-title.png"
        alt=""
      />
      <!-- </h2> -->
      <img
        class="subtitle-image mt-16"
        src="@/assets/image/mobile/write-text-simple-desc.png"
        alt=""
      />
    </commonBanner>
    <!-- 内容撰写难题 -->
    <div class="content-write-dificult">
      <img
        class="title-image"
        src="@/assets/image/writingtext/img／tab02／title／obstacle@2x.png"
      />
      <div class="title-contente">
        你是否还在为内容输出质量而苦恼呢？策划的文案有流量的没深度，有深度的没流量，有深度有流量但没规模？既要又要还要的内容标准，真的能实现吗？当然可以！
      </div>
      <div class="dificult-list-outer scrollbar-class">
        <div class="dificult-list">
          <div class="dificult-item">
            <img
              class="dificult-image"
              src="@/assets/image/writingtext/img1.png"
            />
            <div class="dificult-title">成体系地批量产出内容存在困难</div>
            <div class="dificult-content">
              对于新企业或新产品,快速抢占市场、短期内扩大认知覆盖是初级阶段最大的需求。而对于内容创作工作来说，数量和质量往往是一个悖论，成体系批量产出优质内容，对于小团队和初创公司来几乎是不可能完成的任务。
            </div>
          </div>
          <div class="dificult-item">
            <img
              class="dificult-image"
              src="@/assets/image/writingtext/img4.png"
            />
            <div class="dificult-title">整体策略有效性难以确定</div>
            <div class="dificult-content">
              内容撰写背后是整体营销策略引导，而完整策略往往涵盖了目标定位/受众分析/内容创意/分发渠道/效果评估等多个环节;
              这些环节相互影响, 需要专业团队进行系统性运营以保障其有效执行。
            </div>
          </div>
          <div class="dificult-item">
            <img
              class="dificult-image"
              src="@/assets/image/writingtext/img3.png"
            />
            <div class="dificult-title">文字撰写效率低下</div>
            <div class="dificult-content">
              优秀的文字内容要求写作者既要有卓越的写作能力，还要对企业和产品有深入的了解，同时对行业趋势及竞品也要有充分的认知。多层要求之下，文字撰写效率直线降低，质量和数量均无法达到预期。
            </div>
          </div>
          <div class="dificult-item">
            <img
              class="dificult-image"
              src="@/assets/image/writingtext/img2.png"
            />
            <div class="dificult-title">品牌故事差异化程度欠佳</div>
            <div class="dificult-content">
              大部分内容创作者缺乏品牌思维和商业模式认知，导致文稿仅仅停留在短期营销层面，缺乏长线品牌形象认知塑造。低质量品牌故事的输出不仅对企业形象提升毫无帮助，甚至可能会为之后企业形象打造埋下隐患。
            </div>
          </div>
          <div class="dificult-item">
            <img
              class="dificult-image"
              src="@/assets/image/writingtext/img5.png"
            />
            <div class="dificult-title">文章价值难以提升</div>
            <div class="dificult-content">
              大部分营销文章始终停留在利己层面，这使得文章价值难以提升。有价值的文章应是流量和质量双赢，即以读者想要的方式，将客户的价值点进行有效的输出。这需要的不仅是写作者技巧的提升，更是认知的升级。
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 更简单 -->
    <div class="more-simple" v-if="currentpage > pageShowNode.simple">
      <img
        class="title-image"
        src="@/assets/image/mobile/write-text-simple (1).png"
      />
      <div class="title-contente">
        作为专业的网络推广营销平台，我们深耕营销领域多年，核心团队曾服务过潮玩、文创、地产、教育、区块链、快消等多领域品牌头部企业，拥有丰富的整合营销及事件营销经验，能为您的企业和产品系统性快速输出优质内容，帮助您抢占市场先机，迅速拓展客户认知。
      </div>
    </div>
    <!-- pc轮播对应 -->
    <swipperlist
      :carouselList="carouselList"
      v-if="currentpage > pageShowNode.simple"
    ></swipperlist>
    <endButton v-if="currentpage > pageShowNode.simple"></endButton>
    <div class="loading-box" v-show="loadingPage">...加载中</div>
  </div>
</template>

<script setup>
import commonBanner from "@/components/mobileComponent/commonBanner.vue";
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import EventBus from "@/utils/eventBus.js";
import img1 from "@/assets/image/mobile/write/wirte-banner1.png";
import img2 from "@/assets/image/mobile/write/wirte-banner2.png";
import img3 from "@/assets/image/mobile/write/wirte-banner3.png";
import img4 from "@/assets/image/mobile/write/wirte-banner4.png";
import img5 from "@/assets/image/mobile/write/wirte-banner5.png";

import swipperTitle1 from "@/assets/image/mobile/write/banner-title1.png";
import swipperTitle2 from "@/assets/image/mobile/write/banner-title2.png";
import swipperTitle3 from "@/assets/image/mobile/write/banner-title3.png";
import swipperTitle4 from "@/assets/image/mobile/write/banner-title4.png";
import swipperTitle5 from "@/assets/image/mobile/write/banner-title5.png";
import swipperlist from "./swipperlist.vue";
import endButton from "./endButton.vue";

// 分段加载页面
const currentpage = ref(1);
const loadingPage = ref(false);
const pageShowNode = reactive({
  simple: 1,
});
const handleScrollToBottom = () => {
  if (currentpage.value < 2) {
    loadingPage.value = true;
    setTimeout(() => {
      currentpage.value++;
      loadingPage.value = false;
    }, 1000);
  }
};
// 判断是否存在滚动条，
const initScroll = () => {
  const appDiv = document.getElementById("app");
  if (appDiv.scrollHeight > appDiv.clientHeight) {
    return;
  } else {
    currentpage.value++;
    nextTick(() => {
      initScroll();
    });
  }
};
const carouselList = ref([
  {
    img: img1,
    titleImg: swipperTitle1,
    title: "传播定位分析",
    disc: "专家团队基于品牌定位和大数据，提供行业和受众分析，建立用户画像，有差异性的表达品牌的延展价值与媒体、公众、行业关注的价值点产生利益关联。",
  },
  {
    img: img2,
    titleImg: swipperTitle2,
    title: "整体策略规划",
    disc: "帮助您系统性地制定策略，基于企业现有情况及行业、竞品等情况分析梳理、规划排期，选择适合您的方案及整体实施路径.",
  },
  {
    img: img3,
    titleImg: swipperTitle3,
    title: "内容增强优化",
    disc: "针对特定的传播渠道和目标人群，匹配不同的内容切入角度，增强标题吸引力，优化核心关键词和大数据标签，促进媒体选用，增强搜索端的长尾价值展现.",
  },
  {
    img: img4,
    titleImg: swipperTitle4,
    title: "AI工具辅助",
    disc: "大模型提供拼写和语法检查、风格调整、自动摘要、文本生成和翻译支持。通过语义分析和校对建议，AI帮助编辑优化内容、丰富表达，并确保文章符合读者预期.",
  },
  {
    img: img5,
    titleImg: swipperTitle5,
    title: "效果反馈分析",
    disc: "借助国内和海外媒体监测平台及时把握传播效果，纵穿企业年度传播的总况，及时调整传播节奏与策略达成最优传播目标.",
  },
]);
onMounted(() => {
  initScroll();
  EventBus.on("scrollToBottom", handleScrollToBottom);
});
onBeforeUnmount(() => {
  EventBus.off("scrollToBottom");
});
</script>

<style lang="scss" scoped>
.writing-text {
  width: 100%;
  .banner-title-image {
    height: 24px;
  }
  .subtitle-image {
    height: 48px;
  }
  .loading-box {
    text-align: center;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 10px;
    color: #808080;
    line-height: 24px;
    letter-spacing: 1px;
  }
  .title-contente {
    margin-top: 16px;
    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
    font-weight: 400;
    font-size: 14px;
    color: #808080;
    line-height: 20px;
    padding: 0 40px;
    box-sizing: border-box;
    text-align: center;
  }
  .content-write-dificult {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    .title-image {
      width: 148px;
      height: 50px;
      margin: 0 auto;
    }
    .dificult-list-outer {
      width: 100%;
      margin-top: 32px;
      padding: 16px;
      box-sizing: border-box;
      overflow: overlay;
      .dificult-list {
        display: grid;
        grid-template-rows: repeat(1, 240px);
        grid-template-columns: repeat(6, 307px);
        .dificult-item {
          background: #ffffff;
          border-radius: 12px;
          padding: 32px 12px 0 12px;
          box-sizing: border-box;
          & + .dificult-item {
            margin-left: 12px;
          }
          .dificult-image {
            height: 18px;
          }
          .dificult-title {
            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
            font-weight: bold;
            font-size: 16px;
            color: #1a1a1a;
            line-height: 16px;
            margin-top: 8px;
          }
          .dificult-content {
            font-family: Microsoft YaHei UI, Microsoft YaHei UI;
            font-weight: 400;
            font-size: 14px;
            color: #808080;
            line-height: 20px;
            margin-top: 16px;
          }
        }
      }
    }
  }
  .more-simple {
    margin: 30px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title-image {
      width: 268px;
    }
  }
}
</style>
